<template>
  <div class="chart-box">
    <div class="echart-wrap" :id="id">

    </div>
    <div class="chart-row">
      <span class="key">{{upTxt}}</span>
      <span class="val">{{stat.online}}</span>
    </div>
    <div class="chart-row">
      <span class="key">{{downTxt}}</span>
      <span class="val error">{{stat.offline}}</span>
    </div>
  </div>
</template>

<script>
import pie from '@/charts/pie'
let myChart = null
export default {
  props: {
    id: {
      type: String,
      require: true
    },
    stat: {
      type: Object,
      require: true
    },
    upTxt: {
      type: String,
      default: '在线'
    },
    downTxt: {
      type: String,
      default: '离线'
    },
    inTxt: {
      type: String,
      default: '设备在线率'
    }
  },
  methods: {
    draw() {
      let { offline, online, rate } = this.stat
      let serData = [
        {value: online, name: this.upTxt},
        {value: offline, name: this.downTxt},
      ]

      console.log('环形： ', serData)

      myChart = this.$echarts.init(document.getElementById(this.id))
      myChart.clear()

      const opt = pie(serData, this.inTxt, rate)
      myChart.setOption(opt)
      myChart.resize()
      myChart.dispatchAction({
        type: 'dataZoom',
        start: 0,
        end: 100
      })
      
    },
  },
  mounted() {
    console.log('stat: ', this.stat)
    this.draw()
  }
}
</script>

<style lang="stylus">
.chart-box {
  height: getPx(305);
  border-bottom: 1px solid $border-color;
  .echart-wrap {
    width: getPx(200);
    height: getPx(200);
    margin: getPx(45) auto getPx(20);  
  }
  .chart-row {
    box-sizing: border-box;
    padding-left: getPx(85);
    margin: 0 auto getPx(10);
    .key {
      color: #666;
      font-size: getPx(14);
      letter-spacing: getPx(5);  
    }
    .val {
      color: #333;
      font-size: getPx(18);
      font-weight: bold;  
    }  
  }  
}
</style>